<template>
  <div class="hello" style="background-color: #1a4372;">
    <div style="float: right; margin-top: 10px; margin-bottom: 10px;">
      <el-button type="primary" @click="syncConfig" icon="el-icon-refresh-right" style="margin-right: 10px;">
        同步总控配置
      </el-button>
    </div>
    <el-table
      :data="cmtData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      height="670"
      v-loading.fullscreen.lock="loading"
      :stripe="false"
      :border="false"
      highlight-current-row
      :header-cell-style="{background:'#204c80'}"
      :header-row-style="{textAlign: 'center'}"
      :row-style="{background: '#1a4372'}"
      :highlight-current-row="false"
    >
      <el-table-column prop="ctsCode" label="CTS资料编码" min-width="15%"></el-table-column>
      <el-table-column prop="dataName" label="资料名称" min-width="25%"></el-table-column>
      <el-table-column prop="totalControlDataName" label="总控资料名称" min-width="15%"></el-table-column>
      <el-table-column prop="dataLevel" label="资料级别" min-width="10%"></el-table-column>
      <el-table-column prop="dataType" label="资料类型" min-width="10%"></el-table-column>
      <el-table-column prop="monitorFrequency" label="监控频次" min-width="15%"></el-table-column>
      <el-table-column label="是否显示" min-width="10%">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.isShow"
            :active-value=1
            :inactive-value=0
            active-color="#13ce66"
            @change="changeShow(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="25%">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" plain @click="edit(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" plain @click="whetherDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页栏 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="cmtData.length"
      :page-size="pageSize"
      :page-sizes="[5,10, 20]"
      :current-page="currentPage"
      @current-change="changeCurrent"
      @size-change="changeSize"
      align="center"
      style="margin-top: 10px;"
    ></el-pagination>
    <el-dialog title="修改数据" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="资料别名">
          <el-input v-model="editedObj.dataAlias"></el-input>
        </el-form-item>
        <el-form-item label="总控资料名称">
          <el-input v-model="editedObj.totalControlDataName"></el-input>
        </el-form-item>
        <el-form-item label="资料级别">
          <el-select v-model="editedObj.dataLevel" @change="changeSelect">
            <el-option v-for="option in dataLevelList" :key="option.value" :label="option.label"
                       :value="option.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资料类型">
          <el-select v-model="editedObj.dataTypeId" @change="changeSelect">
            <el-option v-for="option in dataTypeList" :key="String(option.id)" :label="option.dataType"
                       :value="String(option.id)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="editedObj.isShow" :label="1">是</el-radio>
          <el-radio v-model="editedObj.isShow" :label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="监控频次">
          <el-input v-model="editedObj.monitorFrequency"></el-input>
        </el-form-item>
        <el-form-item label="微信端显示排序" :rules="[
          { type: 'number', message: '序号必须为数字值'}
        ]">
          <el-input v-model.number="editedObj.showSort" autocomplete="off" placeholder="请输入整数"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEdit">确定</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      // 表格数据
      cmtData: [],
      currentPage: 1,
      pageSize: 10,
      // 是否显示修改弹框
      dialogFormVisible: false,
      // 当前被修改的对象
      editedObj: {},
      // 资料类型列表
      dataTypeList: [],
      // 资料级别
      dataLevelList: [
        {"label": "站点级", "value": "站点级"},
        {"label": "文件级", "value": "文件级"}
      ],
      loading: false
    }
  },
  methods: {
    getAllData() {
      this.loading = true;
      // 获取所有的资料数据
      this.$http("/tabMcmData/All", {params: {}}).then(response => {
        this.cmtData = response.data.resultData;
        this.loading = false;
      }).catch(err => {
        console.log("连接异常")
        this.loading = false;
      })
    },
    // 改变当前的页码
    changeCurrent(currentPage) {
      this.currentPage = currentPage;
    },
    // 改变当前的显示条数
    changeSize(pageSize) {
      this.pageSize = pageSize;
    },
    // 选中类型下拉条
    changeSelect(value) {
      this.editedObj.dataType = this.dataTypeList.find(item => item.id == value);
      for (let item of this.dataTypeList) {
        if (item.id == value) {
          this.editedObj.dataType = item.dataType;
        }
      }
    },
    edit(obj) {
      // 打开弹窗
      this.dialogFormVisible = true;
      // 深拷贝
      this.editedObj = this.deepClone(obj);
    },
    submitEdit() {
      this.$http({
        "headers": {"Content-Type": "application/json; charset=UTF-8"},
        "method": "put",
        "url": "/tabMcmData/modify",
        "data": this.editedObj
      }).then(response => {
        if (response.data.resultCode == 0) {
          this.$message({message: response.data.resultData, type: "success"})
          this.getAllData();
        } else {
          this.$message.error(response.data.resultMessage)
        }
      })
      this.dialogFormVisible = false;
    },
    // 是否删除
    whetherDelete(obj) {
      // 再次询问是否删除
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(obj);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteData(obj) {
      // 执行删除
      this.$http({
        "headers": {"Content-Type": "application/x-www-form-urlencoded"},
        "method": "delete",
        "url": "/tabMcmData/delete",
        "params": {"id": obj.id}
      }).then(response => {
        if (response.data.resultCode == "0") {
          this.$message({
            message: "删除成功",
            type: "success"
          })
          // 刷新
          this.getAllData();
        } else {
          this.$message({
            message: "删除失败",
            type: "error"
          })
        }
      });
    },
    // 同步总控配置
    syncConfig() {
      this.$http("/tabMcmData/save", {params: {}}).then(response => {
        if (response.data.resultCode == "0") {
          this.$message({message: response.data.resultData, type: "success"})
        } else {
          this.$message({message: "同步失败", type: "error"})
        }
      });
    },
    // 修改开关
    changeShow(row) {
      let status;
      if (row.isShow == 1) {
        status = 0;
      } else if (row.isShow == 0) {
        status = 1;
      }
      // 发送请求修改
      this.$http({
        "headers": {
          "Content-Type": "application/json; charset=UTF-8"
        },
        "method": "put",
        "url": "/tabMcmData/modify/IsShow",
        "data": {"id": row.id, "isShow": status}
      }).then(response => {
        if (response.data.resultCode == 0) {
          this.$message({message: response.data.resultData, type: "success"})
          this.getAllData();
        } else {
          this.$message.error(response.data.resultData)
        }
      })
    },
    // 实现对象的深拷贝
    deepClone(obj) {
      let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
      return objClone
    }
  },

  mounted() {
    this.getAllData();
    // 获取所有资料类型
    this.$http("/tabMcmData/Type/All", {params: {}}).then(response => {
      this.dataTypeList = response.data.resultData
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* 设置tbody字体颜色 */
.el-table {
  font-size: 12px;
  color: #81c6f1;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/* 设置thead字体颜色和大小 */
.el-table thead {
  font-size: 12px;
  color: #81c6f1;
}

/* 去掉表头的底线 */
.el-table th.is-leaf {
  border-bottom: 0;
}

/* 设置tbody的底线 */
.el-table td {
  border-bottom: 1px solid #225188;
  /*border-top: 1px solid #225188;*/
}

/* 鼠标滑过颜色 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(40, 101, 153) !important;
}


.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #174780;
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid #2a5f9c;
  color: #81c6f1;
  font-size: 12px;
}

.el-pagination .el-pagination__total {
  color: #81c6f1;
}

.el-pagination .el-pagination__jump {
  color: #81c6f1;
}

.el-pagination .el-input__inner {
  background-color: #174780;
  border: 1px solid #2a5f9c;
  color: #ffffff;
}
</style>
